<template>
  <div class="app-container flex column">
    <top-title :updateTime="false" :content="content"></top-title>

    <div class="container f1 flex column">
      <div class="title">
        <div class="icon"></div>
        企业基本信息
      </div>
      <div class="row flex">
        <div class="f1 context">
          <div class="label">企业名称:</div>
          <div class="value">{{ $route.query.factoryName }}</div>
        </div>

        <div class="f1 context">
          <div class="label">统一社会信用代码:</div>
          <div class="value">{{ $route.query.factoryCreditCode }}</div>
        </div>
        <div class="f1 context">
          <div class="label">企业编码:</div>
          <div class="value">{{ $route.query.factoryCode }}-{{ prefixZero($route.query.factoryOrder, 3) }}</div>
        </div>
        <div class="f1 context">
          <div></div>
          <div></div>
        </div>
      </div>

      <div class="row flex" style="margin-top: 4px; padding-bottom: 0.2rem; border-bottom: 1px solid #036265">
        <div class="f1 context">
          <div class="label">备案联系人:</div>
          <div class="value">{{ $route.query.factoryUserName }}</div>
        </div>

        <div class="f1 context">
          <div class="label">联系电话:</div>
          <div class="value">{{ $route.query.factoryMobile }}</div>
        </div>
        <div class="f1 context">
          <div class="label">联系邮箱:</div>
          <div class="value">{{ $route.query.factoryMail }}</div>
        </div>
        <div class="f1 context">
          <div></div>
          <div></div>
        </div>
      </div>

      <div class="table-wrap f1">
        <div class="title" style="margin-bottom: 0">
          <div class="icon"></div>
          备案设备列表
        </div>
        <div class="search-group">
          <div class="input-wrap">
            <div class="label">设备型号:</div>
            <div class="input-item">
              <j-input :maxLength="30" clearable v-model="queryParam.deviceModel" placeholder="请输入设备型号" />
            </div>
          </div>

          <div class="input-wrap">
            <div class="label">提交时间:</div>
            <div class="time-item">
              <start-end-time
                :times="times"
                :showTime="{ format: 'HH:mm:ss' }"
                format="YYYY-MM-DD HH:mm:ss"
                @timeChange="timeChange"
                :resetTime="resetTime"
              ></start-end-time>
            </div>
          </div>

          <div class="btn-wrap">
            <a-button
              class="searchBtn"
              @click="searchQuery(queryParam.createTime_begin, queryParam.createTime_end)"
              type="primary"
            >
              搜索
            </a-button>
            <a-button class="resetBtn" @click="searchReset()" type="primary">重置</a-button>
          </div>

          <div class="btn-group">
            <a-button class="searchBtn" @click="showAddDeviceModel" type="primary" v-if="btnFlag">
              添加备案设备
            </a-button>
          </div>
        </div>

        <a-table
          rowKey="id"
          class="tableList"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          @change="handleTableChange"
        >
          <template v-slot:action="records">
            <span class="operation deatil-color" @click="showDetail(records)">详情</span>
            <span class="operation deatil-color" @click="showEditModal(records)" v-if="btnFlag">编辑</span>
            <a-popconfirm title="确定要删除此设备吗?" @confirm="() => delDevice(records.id)" v-if="btnFlag">
              <span class="operation del-color">删除</span>
            </a-popconfirm>
          </template>
        </a-table>
      </div>
    </div>
    <device-detail ref="deviceDetail" @refresh="searchQuery"></device-detail>
    <add-device-model ref="addDeviceModel" @refresh="searchQuery" :title="'新增备案设备'"></add-device-model>
    <edit-device-model ref="editDeviceModel" @refresh="searchQuery"></edit-device-model>
  </div>
</template>

<script>
import startEndTime from '@/components/startEndTime'
import { prefixZero } from '@/utils/util'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import topTitle from '@/components/topTitle'
import addDeviceModel from './model/addDeviceModel'
import editDeviceModel from './model/editDeviceModel'
import deviceDetail from './model/deviceDetail'
import { factoryDeviceTypeDelete } from '@/api/factory'
import JInput from '@/components/jeecg/JInput'
export default {
  name: '',
  components: { startEndTime, topTitle, addDeviceModel, editDeviceModel, deviceDetail, JInput },
  mixins: [JeecgListMixin],
  data() {
    return {
      content: [['备案管理'], [this.$route.query.content]],
      url: {
        list: `/factory/device_type/page?factoryId=${this.$route.query.id}`,
      },

      ipagination: {
        current: 1,
        pageSize: 5,
      },
      btnFlag: true,

      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '设备名称',
          align: 'center',
          dataIndex: 'factoryId_dictText',
        },
        {
          title: '设备型号',
          align: 'center',
          dataIndex: 'deviceModel',
        },
        {
          title: '生产厂家',
          align: 'center',
          width: 280,
          dataIndex: 'productionUnit',
        },
        {
          title: '添加时间',
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  mounted() {
    if (typeof this.$route.query.btnFlag == 'string') {
      this.btnFlag = JSON.parse(this.$route.query.btnFlag)
    }
  },
  methods: {
    prefixZero,
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.createTime_begin = this.$moment(v).valueOf()
      } else {
        this.queryParam.createTime_end = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.createTime_begin = null
        this.queryParam.createTime_end = null
      }
    },

    showAddDeviceModel() {
      this.$refs.addDeviceModel.show({ id: this.$route.query.id })
    },
    showDetail(records) {
      this.$refs.deviceDetail.show(records)
    },

    showEditModal(records) {
      this.$refs.editDeviceModel.show(records)
    },

    async delDevice(id) {
      let res = await factoryDeviceTypeDelete({ id })
      this.$message.success(res.message)
      this.searchQuery()
    },
  },
  destroy() {},
}
</script>

<style scoped lang="less">
.app-container {
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 0.2rem;
    padding-left: 0.16rem;
    .icon {
      width: 8px;
      height: 8px;
      margin-right: 6px;
      background: #00f8ff;
    }
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #00f8ff;
  }

  .container {
    padding: 0.2rem 0.16rem;

    .row {
      padding-left: 0.16rem;
    }
    .context {
      font-size: 0.14rem;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      .label {
        margin-top: 0.24rem;
        color: #02c1c7;
      }

      .value {
        margin-top: 0.12rem;
        color: #85fcff;
      }
    }
  }
  .table-wrap {
    background: #045053;
    padding-top: 0.2rem;
  }
}
</style>
